<template>
  <div class="song-list-page">
    <div class="song-list-header">
      <ul>
        <li
          v-for="(item, index) in this.bangs"
          :key="index"
          :class="{ active: item.title === activeName }"
          @click="handleClickView(item)"
        >
          {{ item.title }}
        </li>
      </ul>
    </div>
    <div class="song-content">
      <!-- <content-list :contentList="data"></content-list> -->
      <div class="album-img" style="float:left;">
        <img
          :src="attachImageUrl(curBang.pic)"
          alt=""
          style="width:170px;height:170px"
        />
      </div>
      <div style="float:left;">
        <br />
        <h1>{{ activeName }}</h1>
        <br />
        <div>{{ this.curBang.introduction }}</div>
      </div>
      <div style="clear:both;"></div>
      <!--歌曲-->
      <div class="songs-body">
        <album-content :songList="bangSongs">
          <!-- <template slot="title">{{  }}</template> -->
        </album-content>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import { mixin } from "../mixins";
import { mapGetters } from "vuex";
import ContentList from "../components/ContentList";
import AlbumContent from "../components/AlbumContent";

export default {
  name: "bang-list-page",
  mixins: [mixin],
  components: {
    ContentList,
    AlbumContent
  },
  data() {
    return {
      host: `${this.$store.state.HOST}`,
      curBang: {}, // 当前选中的榜单
      bangs: [], // 榜单列表
      activeName: "热歌榜",
      pageSize: 15, // 页数
      currentPage: 1, // 当前页
      albumDatas: [], // 歌单
      bangSongs: [] // 歌曲列表
    };
  },
  computed: {
    ...mapGetters(["songsList", "listOfSongs"]),
    // 计算当前表格中的数据
    data() {}
  },
  created() {
    this.getAllBangs(); // 获取全部榜单
  },
  mounted() {},
  methods: {
    // 获取当前页
    handleCurrentChange(val) {
      this.currentPage = val;
    },
    // 获取全部榜单信息
    getAllBangs() {
      axios.get(`${this.$store.state.HOST}/listBangLists`).then(res => {
        if (res.data) {
          this.bangs = res.data;
          if (this.bangs.length > 0) {
            this.handleClickView(this.bangs[0]);
          }
        }
      });
    },
    // 获取歌单列表
    handleClickView(item) {
      // 清空歌曲列表
      this.bangSongs = [];
      this.activeName = item.title;
      this.curBang = item;
      axios
        .get(this.host + "/getSongsByBangListId?bangListId=" + item.id)
        .then(res => {
          if (res.data) {
            this.bangSongs = res.data;
            this.setToSongList(); // 存入到歌单列表
          }
        });
    },
    // 写入到歌单列表里面
    setToSongList() {
      this.$store.commit("setListOfSongs", this.bangSongs);
      window.sessionStorage.setItem(
        "listOfSongs",
        JSON.stringify(this.bangSongs)
      );
    }
    // 获取歌单
    // handleChangeView: function(name) {
    //   this.activeName = name;
    //   this.albumDatas = [];
    //   if (name === "全部歌单") {
    //     this.getSongList(this.cur_page);
    //   } else {
    //     this.getSongListOfStyle(name);
    //   }
    // },
    // 获取全部歌单
    // getSongList(page) {
    //   let _this = this;
    //   axios.get(`${_this.$store.state.HOST}/listSongLists`).then(res => {
    //     _this.currentPage = 1;
    //     _this.albumDatas = res.data;
    //   });
    // },
    // 通过类别获取歌单
    // getSongListOfStyle(style) {
    //   let _this = this;
    //   axios
    //     .get(`${_this.$store.state.HOST}/api/songList/likeStyle?style=${style}`)
    //     .then(res => {
    //       _this.currentPage = 1;
    //       _this.albumDatas = res.data;
    //     });
    // }
  }
};
</script>

<style scoped>
.song-list-page {
  margin: 30px 150px;
  padding-bottom: 50px;
  min-width: 800px;
  background-color: #ffffff;
}

.song-list-header {
  width: 100%;
  padding: 0 40px;
}

li {
  display: inline-block;
  line-height: 40px;
  margin: 40px 20px 15px 20px;
  font-size: 20px;
  font-weight: 400;
  color: #67757f;
  border-bottom: none;
  cursor: pointer;
}

.active {
  color: black;
  font-weight: 600;
  border-bottom: 4px solid black;
}

.pagination {
  display: flex;
  justify-content: center;
}
/*歌曲列表*/
.songs-body {
  background-color: white;
  border-radius: 12px;
  padding: 0 40px 50px 40px;
  min-width: 700px;
}
/*歌单图像*/
.album-img {
  height: 170px;
  width: 170px;
  display: inline-block;
  margin: 0 0 0 50px;
  /* position: relative;
  top: -100px;
  left: 50px; */
  border-radius: 10%;
  overflow: hidden;
  border: 5px solid white;
}
</style>
